import React, { Component } from "react";
import { Provider } from "react-redux";
import { BrowserRouter, Route } from "react-router-dom";
import Header from "./component/Header";
import Content from "./component/Content";
import Bottom from "./component/Bottom";
import ErrorBoundary from "./component/ErrorBoundary";

import ArticleList from "./page/Article/List";
import TodoList from "./page/TodoList";
import Luckysheet from "./page/Luckysheet";
import UseAxios from "./page/UseAxios";

import { store } from "./redux/store";
import "./App.scss";

export default class App extends Component {
  componentDidCatch(error, errorInfo) {
    console.log(error, errorInfo);
  }
  render() {
    return (
      <ErrorBoundary>
        <Provider store={store}>
          <BrowserRouter>
            <div className="wrap">
              <Header />
              <Content>
                <Route path="/" exact component={ArticleList} />
                <Route path="/article/list" component={ArticleList} />
                <Route path="/todolist" component={TodoList} />
                <Route path="/luchkysheet" component={Luckysheet} />
                <Route path="/use_axios" component={UseAxios} />
              </Content>
              <Bottom />
            </div>
          </BrowserRouter>
        </Provider>
      </ErrorBoundary>
    );
  }
}
